<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析
            <small>后台数据统计(一)</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>后台数据统计(一)</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart1'));

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);

    axios.get("/report/order_diagosised1.do").then((res) => {
        var symbolSize = 20;
        myChart1.setOption(
            {
                title: {
                    text: '后台数据统计(一)'
                },
                tooltip: {},
                legend: {
                    data: ['每日预约数', '每日到诊数']
                },
                xAxis: {
                    axisLine: {onZero: false},
                    data: res.data.data.date
                },
                yAxis: {
                    axisLine: {onZero: false},
                    type: 'value'
                },
                dataZoom: [
                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        filterMode: 'empty'
                    },
                    {
                        type: 'slider',
                        yAxisIndex: 0,
                        filterMode: 'empty'
                    },
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        filterMode: 'empty'
                    },
                    {
                        type: 'inside',
                        yAxisIndex: 0,
                        filterMode: 'empty'
                    }
                ],
                series: [
                    {
                        name: '每日预约数',
                        type: 'line',
                        smooth: true,
                        symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
                        data: res.data.data.memberCount
                    },
                    {
                        name: '每日到诊数',
                        type: 'line',
                        smooth: true,
                        symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
                        data: res.data.data.diagnosised
                    }
                ]
            });
    });

    if (!app.inNode) {
        setTimeout(function () {
            // Add shadow circles (which is not visible) to enable drag.
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        type: 'circle',
                        position: myChart.convertToPixel('grid', item),
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: symbolSize / 2
                        },
                        invisible: true,
                        draggable: true,
                        ondrag: echarts.util.curry(onPointDragging, dataIndex),
                        onmousemove: echarts.util.curry(showTooltip, dataIndex),
                        onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                        z: 100
                    };
                })
            });
        }, 0);

        window.addEventListener('resize', updatePosition);
    }

    myChart.on('dataZoom', updatePosition);

    function updatePosition() {
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    position: myChart.convertToPixel('grid', item)
                };
            })
        });
    }

    function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
    }

    function hideTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'hideTip'
        });
    }

    function onPointDragging(dataIndex, dx, dy) {
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);

        // Update data
        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });
    }
</script>


</html>
